<template>
		<el-menu>
			<template v-for="menu in menuList">
				<el-sub-menu v-if="menu.childs.length!=0 && menu.childs[0].menuType!='按钮'" :index="menu.menuId+''">
					<template #title>
						<router-link :to="menu.menuPath">{{menu.menuName}}</router-link>
					</template> 
					<el-menu-item  v-if="menu.childs[0].menuType!='按钮'" v-for="menu2 in menu.childs" :index="menu2.menuId+''">
						<router-link  :to="menu2.menuPath">{{menu2.menuName}}</router-link>
					</el-menu-item>
				</el-sub-menu>
				<el-menu-item v-else :index="menu.menuId+''">
					<router-link :to="menu.menuPath">{{menu.menuName}}</router-link>
				</el-menu-item>
			</template>
		</el-menu>
	
</template>

<script setup>
	import { ElRow,ElCol,ElMenu,ElMenuItem,ElSubMenu } from 'element-plus';
	 import { onMounted, ref } from 'vue';
	 import { getAllMenuList } from '@/api'
	 import { useRoute,useRouter } from 'vue-router';
	 let menuList=ref([])
	 let route=useRoute()
	 let router=useRouter()
	onMounted(async ()=>{
		let menuRes=await getAllMenuList({
			roleId:Number(sessionStorage.getItem("roleId"))
		})
		//console.log('menuRes',menuRes)
		let myPath="/"+route.path.split('/')[1];
		let m=menuRes.filter(v=>v.menuPath==myPath)
		menuList.value=m[0].childs
		
	})
</script>
<style scoped>
	.el-menu{
		height: 91vh;
		border: none;
		background: #ffffff;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
	/* 设置滚动条的宽度 */
	::-webkit-scrollbar {
	  width: 5px; /* 滚动条宽度 */
	  background-color: #d9d9d9;
	}
	:deep(.el-sub-menu__title){
		padding:0;
	}
	a{
		text-decoration:none;
		color:#494948;
		width: 100%;
		height: 45px;
		margin: 0 auto;
		text-align: center;
	}
	
	.el-menu-item{
		margin-right: 0 !important;
	}
	:deep(.el-menu--vertical .el-menu-item){
		height: 45px !important;
		line-height: 45px;
		margin-right: 0px !important;
	}
	a.router-link-active{
		background: #e9ecfd;
		color: #6e70bf;
	}
</style>